@use 'sass:map';
@use '../../../styles/mixins';
@use '../variables';
@use '../Avatar/variables' as avatar-variables;

$block: '.#{variables.$ns}user-label';

#{$block} {
    $transitionDuration: 0.1s;
    $transitionTimingFunction: ease-in-out;

    --_--size: #{map.get(avatar-variables.$sizes, 's')};
    --_--border-radius: 25px;
    --_--padding: var(--g-spacing-3);
    --_--gap: calc(var(--g-spacing-base) * 1.5);
    --_--text-font-weight: var(--g-text-body-font-weight);
    --_--text-font-size: var(--g-text-body-short-font-size);
    --_--text-line-height: var(--g-text-body-short-line-height);
    --_--description-font-weight: var(--g-text-body-font-weight);
    --_--description-font-size: var(--g-text-body-short-font-size);
    --_--description-line-height: var(--g-text-body-short-line-height);

    position: relative;
    z-index: 0;
    display: inline-flex;
    max-width: 100%;
    height: var(--g-user-label-size, var(--_--size));
    border-radius: var(--g-user-label-border-radius, var(--_--border-radius));

    transition-property: background-color;
    transition-duration: $transitionDuration;
    transition-timing-function: $transitionTimingFunction;

    &_view_outlined {
        &::after {
            content: '';
            position: absolute;
            z-index: -1;
            inset: 0;
            border: 1px solid var(--g-color-line-generic-solid);
            border-radius: inherit;

            transition-property: border-color;
            transition-duration: $transitionDuration;
            transition-timing-function: $transitionTimingFunction;
        }
    }

    &_size {
        @each $size-name, $size-value in avatar-variables.$sizes {
            &_#{$size-name} {
                --_--size: #{$size-value};
            }
        }

        &_3xs,
        &_2xs {
            --_--padding: calc(var(--g-spacing-base) * 1.5);
            --_--gap: var(--g-spacing-1);
        }

        &_xs {
            --_--padding: calc(var(--g-spacing-base) * 2.5);
            --_--gap: calc(var(--g-spacing-base) * 1.5);
        }

        &_s {
            --_--padding: var(--g-spacing-3);
            --_--gap: calc(var(--g-spacing-base) * 1.5);
        }

        &_m {
            --_--padding: var(--g-spacing-3);
            --_--gap: var(--g-spacing-2);
        }

        &_l {
            --_--padding: var(--g-spacing-4);
            --_--gap: var(--g-spacing-3);
        }

        &_xl {
            --_--padding: var(--g-spacing-5);
            --_--gap: var(--g-spacing-4);
        }

        &_3xs,
        &_2xs,
        &_xs {
            --_--text-font-weight: var(--g-text-caption-font-weight);
            --_--text-font-size: var(--g-text-caption-2-font-size);
            --_--text-line-height: var(--g-text-caption-2-line-height);
        }

        &_s,
        &_m,
        &_l {
            --_--text-font-weight: var(--g-text-body-font-weight);
            --_--text-font-size: var(--g-text-body-short-font-size);
            --_--text-line-height: var(--g-text-body-short-line-height);
        }

        &_xl {
            --_--text-font-weight: var(--g-text-body-font-weight);
            --_--text-font-size: var(--g-text-body-2-font-size);
            --_--text-line-height: var(--g-text-body-2-line-height);
        }
    }

    &_clickable:hover {
        background-color: var(--g-color-base-simple-hover);

        &::after {
            border-color: transparent;
        }
    }

    &__avatar {
        --g-avatar-size: var(--g-user-label-size, var(--_--size));
        --g-avatar-border-width: 1px;
        --g-avatar-inner-border-width: 0;
        --g-avatar-background-color: var(--g-color-base-neutral-light);
        --g-avatar-text-color: var(--g-color-text-primary);

        display: flex;
        margin-inline-end: var(--g-user-label-gap, var(--_--gap));
    }

    &__main {
        @include mixins.button-reset();

        display: flex;
        align-items: center;
        min-width: 0;
        border-radius: var(--g-user-label-border-radius, var(--_--border-radius));
        padding-inline-end: var(--g-user-label-padding, var(--_--padding));
        cursor: unset;

        #{$block}_empty & {
            padding-inline-start: var(--g-user-label-padding, var(--_--padding));
        }

        #{$block}_clickable & {
            outline-offset: -1px;
            cursor: pointer;

            &:focus-visible {
                @include mixins.focus-outline();
            }
        }

        #{$block}_closeable & {
            padding-inline-end: var(--g-user-label-gap, var(--_--gap));
        }
    }

    &__info {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    &__text {
        @include mixins.overflow-ellipsis();

        color: var(--g-color-text-primary);
        font-weight: var(--g-user-label-text-font-weight, var(--_--text-font-weight));
        font-size: var(--g-user-label-text-font-size, var(--_--text-font-size));
        line-height: var(--g-user-label-text-line-height, var(--_--text-line-height));
    }

    &__description {
        @include mixins.overflow-ellipsis();

        color: var(--g-color-text-secondary);
        font-weight: var(--g-user-label-description-font-weight, var(--_--description-font-weight));
        font-size: var(--g-user-label-description-font-size, var(--_--description-font-size));
        line-height: var(--g-user-label-description-line-height, var(--_--description-line-height));
    }

    &__close {
        @include mixins.button-reset();

        box-sizing: initial;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: var(--g-user-label-border-radius, var(--_--border-radius));
        padding-inline-end: var(--g-user-label-padding, var(--_--padding));
        color: var(--g-color-text-secondary);
        cursor: pointer;

        transition-property: color;
        transition-duration: $transitionDuration;
        transition-timing-function: $transitionTimingFunction;

        &:hover {
            color: var(--g-color-text-primary);
        }
    }

    &__close-icon {
        border-radius: var(--g-focus-border-radius);

        #{$block}__close:focus-visible & {
            @include mixins.focus-outline();
        }
    }
}
